<template>
  <div class="backOrderItem-box">
    <div class="row_header">
      订单编号： {{orderItem.no}}
      <span>创建时间： {{orderItem.createTime}}</span>
      <span>
        <el-tag type="warning" v-if="orderItem.orderType==3">自建订单</el-tag>
        <el-tag type="warning" v-if="orderItem.orderType==2">竞价回收</el-tag>
        <el-tag type="warning" v-if="orderItem.orderType==1">我的回收</el-tag>
         <el-tag type="warning" v-if="orderItem.orderType==4">竞价回收</el-tag>
      </span>

      <span>状态： <el-tag :type="commonMaps.backOrderStateMap[orderItem.orderStatus||1].type">{{commonMaps.backOrderStateMap[orderItem.orderStatus||1].label}}</el-tag></span>
      <span>
        支付： <span style="cursor: pointer;" >
          <el-tag type="success" v-if="orderItem.buyerPayStatus==2" @click="openBillDialog(orderItem.buyerFinancialStatementId,userType!='guarant')">已支付</el-tag>
          <el-tag type="danger" v-if="orderItem.buyerPayStatus==1">未支付</el-tag>
          <el-tag type="warning" v-if="orderItem.buyerPayStatus==3" @click="openBillDialog(orderItem.buyerFinancialStatementId,userType!='guarant')">打款中</el-tag>
          <el-tag type="info" v-if="orderItem.buyerPayStatus==4" @click="openBillDialog(orderItem.buyerFinancialStatementId,userType!='guarant')">财务拒绝</el-tag>
        </span>
      </span>
      <!-- guaranteePayStatus -->
      <span>
        换绑： <span>
          <el-tag v-if="orderItem.changeBindState==1" :type="'danger'">未换绑</el-tag>
          <el-tag v-if="orderItem.changeBindState==2" :type="'success'">已换绑</el-tag>
        </span>
      </span>
      <span v-if="orderItem.guaranteeTenantId">
        放款： <span style="cursor: pointer;" @click="openBillDialog(orderItem.guaranteeFinancialStatementId,userType=='guarant')">
          <el-tag type="danger" v-if="orderItem.guaranteePayStatus==1||!orderItem.guaranteePayStatus">未放款</el-tag>
          <el-tag type="success" v-if="orderItem.guaranteePayStatus==2">已放款</el-tag>
          <el-tag type="warning" v-if="orderItem.guaranteePayStatus==3">放款中</el-tag>
          <el-tag type="info" v-if="orderItem.guaranteePayStatus==4">财务拒绝</el-tag>
        </span>
      </span>
      <span v-if="orderItem.guaranteeRefundStatus&&orderItem.guaranteeTenantId">
        退款： <span style="cursor: pointer;" @click="openBillDialog(orderItem.guaranteeRefundFinancialStatementId,userType=='guarant')">
          <el-tag type="danger" v-if="orderItem.guaranteeRefundStatus==1||!orderItem.guaranteeRefundStatus">未退款</el-tag>
          <el-tag type="success" v-if="orderItem.guaranteeRefundStatus==2">已退款</el-tag>
          <el-tag type="warning" v-if="orderItem.guaranteeRefundStatus==3">退款中</el-tag>
          <el-tag type="info" v-if="orderItem.guaranteeRefundStatus==4">财务拒绝</el-tag>
        </span>
      </span>
      <span @click="clickHetong">
        合同： 
        <span v-if="orderItem.orderType==3" style="color: #333;">
            请在“常用功能 > 合同管理”中自行签署合同
          </span>
        <span v-else style="cursor: pointer;" >
          
          <el-tag type="danger" v-if="orderItem.signContractState==1||!orderItem.signContractState">未签署</el-tag>
          <el-tag type="warning" v-if="orderItem.signContractState==2">签署中</el-tag>
          <el-tag type="success" v-if="orderItem.signContractState==3">已签署</el-tag>
        </span>
      </span>
      <span v-if="orderItem.isAfter==2" style="cursor: pointer;">
        <el-tag type="danger" @click="openAfterOrder">有售后</el-tag>
      </span>
      <!-- guaranteeRefundStatus -->
    </div>
    <div class="row_content flex">
      <div class="info_box">
        <el-descriptions title="" :column="4" border :labelStyle="{minWidth:'80px',textAlign:'right'}" :contentStyle="{minWidth:'100px',textAlign:'left'}">
          <el-descriptions-item label="卖家">
            {{orderItem.sellerName}} 
            <span v-if="orderItem.orderType==2">
              <span v-if="allYouzhiMap&&allYouzhiMap[orderItem.sellerTenantId]">
                <youzhiName :name="orderItem.sellerTenantName"></youzhiName>
              </span>
              <span v-else>
                ({{ orderItem.sellerTenantName }})
              </span>
            </span>

            


          </el-descriptions-item>
          <el-descriptions-item label="游戏名称">{{orderItem.gameName}}</el-descriptions-item>
          <el-descriptions-item label="游戏账号">{{orderItem.accountNumber}}</el-descriptions-item>
          <el-descriptions-item label="区服" :span="3">{{orderItem.qufu}}</el-descriptions-item>

          <el-descriptions-item label="买家" >
            <!-- {{orderItem.buyerName}} -->
            <span v-if="allYouzhiMap&&allYouzhiMap[orderItem.buyerTenantId]">
                    <youzhiName :name="orderItem.buyerTenantName"></youzhiName>
            </span>
            <span v-else>
              {{ orderItem.buyerTenantName }}
            </span>

          </el-descriptions-item>
          <el-descriptions-item label="包赔商" v-if="orderItem.guaranteeTenantName">{{orderItem.guaranteeTenantName}}</el-descriptions-item>
          <el-descriptions-item label="包赔客服" v-if="orderItem.guaranteeTenantId">{{orderItem.guaranteeName}}</el-descriptions-item>
          <!-- <el-descriptions-item label="放款状态" v-if="orderItem.guaranteeTenantId">未放款</el-descriptions-item> -->
          <!-- 回收 卖家的包赔信息 -->
          <!-- <el-descriptions-item label="卖家实名" v-if="(userType=='guarant'&&orderItem.guaranteeInfo)">{{getRowsellerBankInfo(orderItem.guaranteeInfo).name}}</el-descriptions-item> -->
          <!-- <el-descriptions-item label="卖家手机" v-if="(userType=='guarant'&&orderItem.guaranteeInfo)">{{getRowsellerBankInfo(orderItem.guaranteeInfo).phoneNumber}}</el-descriptions-item> -->
          <!-- <el-descriptions-item :label="getRowsellerBankInfo(orderItem.guaranteeInfo).zhizhao?'统一信用代码':'身份证号'" :span="2" v-if="(userType=='guarant'&&orderItem.guaranteeInfo)">{{getRowsellerBankInfo(orderItem.guaranteeInfo).idCard}}</el-descriptions-item> -->

          <el-descriptions-item label="包赔费" v-if="orderItem.guaranteeAmount">
            <span style="color:red">¥{{orderItem.guaranteeAmount}}</span>
          </el-descriptions-item>
          <el-descriptions-item label="手续费" v-if="orderItem.guaranteeServiceAmount">
            <span style="color:red">¥{{orderItem.guaranteeServiceAmount}}</span>
          </el-descriptions-item>

          <el-descriptions-item label="回收价">
            <span style="color:red" v-if="orderItem.backAmount">¥{{orderItem.backAmount}}</span>
          </el-descriptions-item>
          <el-descriptions-item label="总金额" >
            <span style="color:red">¥{{orderItem.buyerActualAmount}}</span>
          </el-descriptions-item>
          <el-descriptions-item label="收款账户" >

            <span v-if="orderItem.guaranteeTenantId&&orderItem.guaranteeTenantCollection">包赔商: {{getRowBaopeiInfo(orderItem.guaranteeTenantCollection)}}</span>
            <span v-if="!orderItem.guaranteeTenantId&&orderItem.guaranteeInfo">卖家: {{getRowsellerBankInfo(orderItem.guaranteeInfo).collectionRemark}}</span>
            <span v-if="orderItem.orderType==3&&orderItem.guaranteeTenantCollection">{{ getRowBaopeiInfo(orderItem.guaranteeTenantCollection) }}</span>
          </el-descriptions-item>
          <el-descriptions-item v-if="userType!='guarant'" label="备注">{{orderItem.remark}}</el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="btns_box">
        <slot></slot>
      </div>
    </div>
    <billDetail ref="billDetail"></billDetail>
    <backOrderAfterListDialog ref="backOrderAfterListDialog"></backOrderAfterListDialog>
  </div>
</template>

<script>
import billDetail from "../../financialManage/billDetailDialog.vue";
import backOrderAfterListDialog from "../recycleOrders/backOrderAfterListDialog.vue"
export default {
  name: "backOrderItem",
  props: ["orderItem", "userType"],
  components: { billDetail ,backOrderAfterListDialog},
  data() {
    return {};
  },
  computed: {
    getRowBaopeiInfo() {
      return (str) => {
        if (str) {
          const obj = JSON.parse(str);
          let s = `${obj.collectionUserName} ${obj.collectionAccountName}  ${obj.collectionAccount} `;
          return s;
        }
      };
    },
    getRowsellerBankInfo() {
      return (str) => {
        if (str) {
          const obj = JSON.parse(str);
          obj.zhizhao = false
          if(/[a-zA-Z]/.test(obj.idCard)){
            obj.zhizhao = true
          }
          // let s = `${obj.collectionRemark} `;
          return obj;
        }
      };
    },
    allYouzhiMap(){
      return this.$store.getters.allYouzhiMap;
    }
  },
  created() {},
  methods: {
    openBillDialog(id, flag) {
      if (flag) {
        if (!id) {
          return this.$message.error("暂未生成账单！");
        }
        this.$refs.billDetail.open(id);
      }
    },
    clickHetong(){
      if(this.orderItem.orderType==3){
        this.$message.error('自建订单请在“常用功能 > 合同管理”中自行签署合同！')
      }
    },
    openAfterOrder(){
      this.$refs.backOrderAfterListDialog.open(this.orderItem.id,this.userType);
    }
  },
};
</script>
<style scoped lang="scss">
.descriptionstitle {
  text-align: center;
}
.backOrderItem-box {
  margin-bottom: 15px;
  border: 1px solid #f1f1f1;
  border-radius: 10px;
  overflow: hidden;
  .row_header {
    padding: 8px;
    padding-left: 20px;
    background-color: #6d5dd365;
    > span {
      margin-left: 20px;
    }
    // text-align: center;
  }
  .info_box {
    width: 100%;
  }
  .btns_box {
    width: 200px;
    flex-shrink: 0;
    padding: 10px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
  }
}

.backOrderItem-box
  ::v-deep
  .el-descriptions--medium.is-bordered
  .el-descriptions-item__cell {
  padding: 5px !important;
}
</style>
